import { Component } from "react";
import { AtSearchBar, AtIcon } from "taro-ui";
import { View } from "@tarojs/components"
import Taro from "@tarojs/taro"

import "taro-ui/dist/style/components/search-bar.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/flex.scss";
export default class CustomSearch extends Component{

    constructor(){
        super(...arguments)
        this.state = {
            actionName: "搜搜",
            value: ''
        }
    }

    /**
     * 输入字符监听
     * @param value 输入参数
     */
    onChange = (value) => {
        this.setState({
            value: value
        })
    }

    /**
     * 搜索按钮事件
     */
    onActionClick = () => {
        const searchContent = this.state.value;
        console.info("搜索信息：" + searchContent)
        Taro.request({
            url: '', //仅为示例，并非真实的接口地址
            data: {
              key: searchContent
            },
            header: {
              'content-type': 'application/json' // 默认值
            },
            success: function (res) {
              console.log(res.data)
            }
        })
    }

    render(){
        const { value, actionName } = this.state;
        return (
            <View>
                <AtSearchBar
                    value={value}
                    onChange={this.onChange.bind(this)}
                    actionName={actionName}
                    onActionClick={this.onActionClick.bind(this)}
                />
            </View>
        )
    }
}
